<template>
    <div>
        <a-modal
            :visible="visible"
            :title="visibleTitle"
            :maskClosable="false"
            :closable="true"
            :destroyOnClose="true"
            width="100%"
            :dialog-style="{ margin: '0 auto'}"
            wrapClassName="internshipAssessment-handleModal"
            @cancel="closeVisible"
            >
            <template slot="footer">
                <a-button key="back" @click="closeVisible">
                    关闭
                </a-button>
                <span v-if="!isView" style="margin-left: 10px;">
                    <a-button class="red-btn" @click="returnVisible = true" v-if="linkName !== '个人总结'">
                        退回上一步
                    </a-button>
                    <a-button @click="saveFuntion">
                        保存
                    </a-button>
                    <a-button class="blue-btn" @click="submitFuntion">
                        提交
                    </a-button>
                </span>
            </template>
            <div class="internshipAssessment-handleModal-div">
                <a-button class="blue-btn" @click="printHandle" v-if="isView">打印</a-button>
                <a-form :form="form" ref="form" class="internshipAssessment-handleModal-form-box">
                    <h1 style="text-align: center;font-weight: 600;font-size: 20px;">新聘任审评员实习审评评定表</h1>
                    <a-descriptions :column="2" bordered style="width: 100%;">
                        <a-descriptions-item>
                            <span slot="label" class="descriptions-label-slot">
                                姓&emsp;&emsp;名
                            </span>
                            <a-form-item class="zm-form-model">
                                {{ formState.fjcyxm }}
                            </a-form-item>
                        </a-descriptions-item>
                        <a-descriptions-item>
                            <span slot="label" class="descriptions-label-slot">
                                工作单位
                            </span>
                            <a-form-item class="zm-form-model">
                                {{ formState.fgzdw }}
                            </a-form-item>
                        </a-descriptions-item>
                        <a-descriptions-item>
                            <span slot="label" class="descriptions-label-slot">
                                审评组长
                            </span>
                            <a-form-item class="zm-form-model">
                                {{ formState.fzzxm }}
                            </a-form-item>
                        </a-descriptions-item>
                        <a-descriptions-item>
                            <span slot="label" class="descriptions-label-slot">
                                审评类别
                            </span>
                            <a-form-item class="zm-form-model">
                                {{ formState.fjclx }}
                            </a-form-item>
                        </a-descriptions-item>
                        <a-descriptions-item>
                            <span slot="label" class="descriptions-label-slot">
                                审评时间
                            </span>
                            <a-form-item class="zm-form-model">
                                {{ formState.fjcsj }}
                            </a-form-item>
                        </a-descriptions-item>
                        <a-descriptions-item>
                            <span slot="label" class="descriptions-label-slot">
                                审评单位
                            </span>
                            <a-form-item class="zm-form-model">
                                {{ formState.fqymc }}
                            </a-form-item>
                        </a-descriptions-item>
                        <a-descriptions-item :span="2">
                            <span slot="label" class="descriptions-label-slot">
                                审评范围<br/>(品种名称)
                            </span>
                            <a-form-item class="zm-form-model" style="line-height: 2;">
                                <div style="line-height: 2;">{{ formState.fcyjcfw }}</div>
                            </a-form-item>
                        </a-descriptions-item>
                        <a-descriptions-item :span="2">
                            <span slot="label" class="descriptions-label-slot">
                                <span class="xhText" v-if="!isView && linkName == '个人总结'">*</span>
                                承担审评任务
                            </span>
                            <a-form-item ref="fcdjcrw" prop="fcdjcrw"  class="zm-form-model">
                                <a-textarea
                                    v-if="!isView && linkName == '个人总结'"
                                    v-model="formState.fcdjcrw"
                                    placeholder="请输入承担审评任务:(200字以内)"
                                    :maxLength="200" :auto-size="{ minRows: 3}"
                                    v-decorator="[
                                        'fcdjcrw', { initialValue:formState.fcdjcrw, rules: rules.fcdjcrw}
                                    ]"/>
                                <p v-else>{{formState.fcdjcrw}}</p>
                            </a-form-item>
                        </a-descriptions-item>
                        <a-descriptions-item :span="2">
                            <span slot="label" class="descriptions-label-slot">
                                <span class="xhText" v-if="!isView && linkName == '个人总结'">*</span>
                                实习审评员总结
                            </span>
                            <a-form-item ref="fsxjcyzj" prop="fsxjcyzj"  class="zm-form-model">
                                <quill-editor
                                    v-if="!isView && linkName == '个人总结'"
                                    v-model="formState.fsxjcyzj"
                                    ref="myQuillEditor"
                                    :options="editorOption"
                                    >
                                    </quill-editor>
                                <div v-else v-html="processedContent(formState.fsxjcyzj)" style="line-height: 2;"></div>
                            </a-form-item>
                        </a-descriptions-item>
                        <a-descriptions-item :span="2" v-if="isView || linkName !== '个人总结'">
                            <span slot="label" class="descriptions-label-slot">
                                <span class="xhText" v-if="!isView && linkName == '组长评价'">*</span>
                                审评组长对本审评员的总体概论<br/>(优点和缺点，不能只提优点)
                            </span>
                            <a-form-item ref="fzzyj" prop="fzzyj"  class="zm-form-model">
                                <a-textarea
                                    v-if="!isView && linkName == '组长评价'"
                                    v-model="formState.fzzyj"
                                    placeholder="请输入审评组长对本审评员的总体概论：(200字以内)"
                                    :maxLength="200" :auto-size="{ minRows: 3}"
                                    v-decorator="[
                                        'fzzyj', { initialValue:formState.fzzyj, rules: rules.fzzyj}
                                    ]"/>
                                <p v-else>{{formState.fzzyj}}</p>
                            </a-form-item>
                        </a-descriptions-item>
                        <a-descriptions-item :span="2" v-if="isView || linkName !== '个人总结'">
                            <span slot="label" class="descriptions-label-slot">
                                <span class="xhText" v-if="!isView && linkName == '组长评价'">*</span>
                                考核结果建议
                            </span>
                            <a-form-item ref="fzzyj" prop="fzzyj"  class="zm-form-model">
                                <a-radio-group
                                    name="radioGroup"
                                    v-if="!isView && linkName == '组长评价'"
                                    v-model="formState.fpj"
                                    :disabled="false"
                                    v-decorator="[
                                        'fpj', { initialValue:formState.fpj, rules: rules.fpj}
                                    ]">
                                    <a-radio value="优秀">
                                        优秀
                                    </a-radio>
                                    <a-radio value="合格">
                                        合格
                                    </a-radio>
                                    <a-radio value="不合格">
                                        不合格
                                    </a-radio>
                                </a-radio-group>
                                <span v-else style="padding-left: 15px;">{{formState.fpj}}</span>
                            </a-form-item>
                        </a-descriptions-item>
                        <a-descriptions-item :span="2" v-if="linkName !== '个人总结' && linkName !== '组长评价'">
                            <span slot="label" class="descriptions-label-slot">
                                办理意见
                            </span>
                            <a-form-item ref="opinion" prop="opinion"  class="zm-form-model">
                                <a-textarea
                                    v-if="!isView && linkName == '经办人审核'"
                                    v-model="formState.opinion"
                                    placeholder="请输入办理意见：(200字以内)"
                                    :maxLength="200" :auto-size="{ minRows: 3}"
                                    v-decorator="[
                                        'opinion', { initialValue:formState.opinion, rules: rules.opinion}
                                    ]"/>
                                <p v-else>{{formState.opinion}}</p>
                            </a-form-item>
                        </a-descriptions-item>
                    </a-descriptions>
                    <div v-if="!isView && rawData.nextNodeDbrList.length" style="display: flex;justify-content: space-around;padding: 20px;border: 1px solid #e4e3e3;border-top: none;">
                        <div>
                            <span>待办人：</span>
                            <!-- <a-radio-group name="radioGroup" v-model="dbrid">
                                <a-radio
                                v-for="d in rawData.nextNodeDbrList"
                                :key="d.dbrid"
                                :value="d.dbrid"
                                >
                                {{ d.dbr }}
                                </a-radio></a-radio-group
                            > -->
                            <span
                                v-for="d in rawData.nextNodeDbrList"
                                :key="d.dbrid"
                                style="margin-right: 10px;">
                                {{ d.dbr }}
                            </span>
                        </div>
                        <div>
                            是否发送短信：<a-checkbox v-model="smgflagIs"></a-checkbox>
                        </div>
                    </div>
                </a-form>
            </div>
        </a-modal>
        <a-modal
            title="退回意见"
            :visible="returnVisible"
            :confirm-loading="confirmLoading"
            @ok="returnVisibleOk"
            @cancel="returnVisibleCancel"
            >
            <reviewOpinions
                v-if="returnVisible"
                ref="reviewOpinionsRefthyj"
                @getInputOpinion="getInputOpinion"
                @openOpinions="opinions('见习考核',formState.thyj,'thyj')"
                v-decorator="[
                    'thyj', { initialValue:formState.thyj, rules: rules.thyj}
            ]"/>
        </a-modal>
        <printInspector ref="printRefName" />
    </div>
</template>
<script>
import compSelector from '@/components/compSelector/compSelector'
import {
    saveFlow,
    submitFlow,
    returnUpperFlowJob,
    downMyQm
} from "./service/index";
import moment from 'moment'
import printInspector from './print.vue'
export default {
    props:{},
    components:{
        compSelector,
        printInspector,
    },
    data() {
        return {
            rawData: {},
            moment:moment,
            visible: false,
            isView: false,
            form: this.$form.createForm(this, { name: 'form' }),
            formState: {},
            dbrid: '',
            thyj: '',
            visibleTitle: '',
            linkName: '',
            smgflagIs: false,
            rules: {
                fcdjcrw: [{ required: true, message: '请输入承担审评任务', trigger: 'blur' }],
                fzzyj: [{ required: true, message: '请输入审评组长对本审评员的总体概论', trigger: 'blur' }],
                fpj: [{ required: true, message: '请选择考核结果', trigger: 'blur' }],
                thyj: [{ required: true, message: '请输入退回意见', trigger: 'blur' }],
            },
            returnVisible: false,
            confirmLoading: false,
            editorOption: {
                placeholder: '请在这里输入',
                modules: {
                toolbar: [
                    ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
                    ['blockquote', 'code-block'], // 引用，代码块
                    [{ 'header': 1 }, { 'header': 2 }], // 标题，键值对的形式；1、2表示字体大小
                    [{ 'list': 'ordered' }, { 'list': 'bullet' }], // 列表
                    [{ 'script': 'sub' }, { 'script': 'super' }], // 上下标
                    [{ 'indent': '-1' }, { 'indent': '+1' }], // 缩进
                    [{ 'direction': 'rtl' }], // 文本方向
                    [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
                    [{ 'header': [1, 2, 3, 4, 5, 6, false] }], // 几级标题
                    [{ 'color': [] }, { 'background': [] }], // 字体颜色，字体背景颜色
                    [{ 'font': [false, 'heiti', 'songti', 'kaiti', 'lishu', 'arial', 'monospace'] }], // 字体
                    [{ 'align': [] }], // 对齐方式
                    ['clean'], // 清除字体样式
                    ['image', 'video'] // 上传图片、上传视频
                ]
                }
            },
        }
    },
    mounted() { },
    watch: {},
    methods: {
        getData(val,isview){
            if(val){
                this.visible = true
                this.rawData = val
                this.isView = isview

                this.visibleTitle = this.isView?'新聘任审评员实习审评评定查看':val.job.fhjmc
                this.linkName = val.job.fhjmc
                this.formState = val.ybkp

                if (this.rawData.nextNodeDbrList.length) {
                    this.dbrid = this.rawData.nextNodeDbrList[0].dbrid;
                }
            }
        },
        // 右上角关闭后的回调
        closeVisible(e){
            this.$emit('success')
            this.visible = false
        },
        saveFuntion(){
            let data = {
                currentNode:'',
                // dbrid: this.dbrid,
                jobid: this.rawData.job.id,
                map: this.formState,
                opinion: '',
                smgflag: this.smgflagIs?true:false,
                ybid: this.formState.id,
            }
            saveFlow(data).then(res => {
                if(res.code == 200){
                    this.$message.success(res.message)
                }else{
                    this.$message.error(res.message)
                }
            })
        },
        submitFuntion(){
            this.form.validateFields((err, values) => {
                if (!err) {
                    var that = this
                    that.$confirm({
                        title: '您确定要提交吗?',
                        onOk() {
                            let data = {
                                currentNode:'',
                                // dbrid: that.dbrid,
                                jobid: that.rawData.job.id,
                                map: that.formState,
                                opinion: '',
                                smgflag: that.smgflagIs?true:false,
                                ybid: that.formState.id,
                            }
                            submitFlow(data).then(res => {
                                if(res.success){
                                    that.$message.success(res.message)
                                    that.closeVisible()
                                }
                            })
                        }
                    })
                }
            })
        },
        returnVisibleOk(e) {
            // this.confirmLoading = true;
            // setTimeout(() => {
            //     this.returnVisible = false;
            //     this.confirmLoading = false;
            // }, 2000);
            if(!this.thyj){
                this.$message.warning('请输入退回意见')
                return
            }
            this.confirmLoading = true;
            let data = {
                currentNode:'',
                // dbrid: this.dbrid,
                jobid: this.rawData.job.id,
                map: this.formState,
                opinion: this.thyj,
                smgflag: this.smgflagIs?true:false,
                ybid: this.formState.id,
            }
            returnUpperFlowJob(data).then((res) => {
                if (res.success) {
                    this.$message.success(res.message)
                    this.returnVisible = false
                    this.closeVisible()
                } else {
                    this.$message.warning(res.message)
                }
                this.confirmLoading = false;
            })
        },
        returnVisibleCancel(e) {
            //console.log('Clicked cancel button');
            this.returnVisible = false;
        },
        opinions(val1,val2,val3){
            //console.log(val1,val2,val3)
            this.$refs[`reviewOpinionsRef${val3}`].getData({opinionType:val1,oldVal:val2,valueData:{hjmc:val3}})

        },
        processedContent(val) {
            // 使用正则表达式替换掉 <p><br></p>
            const cleaned = val.replace(/<p><br\s*\/?><\/p>/gi, '');
            return cleaned;
        },
        getInputOpinion(val,valueData){
            //console.log(val,valueData)
            this.thyj = val
            // let data = this.formState
            // data[valueData.hjmc] = val
            // this.form.setFieldsValue({
            //     fthyj: this.formState.fthyj,
            // });
        },
        printHandle(){
            var list = []
            var item = this.formState
            downMyQm({id:item.fzzid}).then(res=>{
                //console.log('下载签名---',res)
                if(res.code){
                    item['signature'] = null
                } else {
                    item['signature'] = "data:image/png;base64," +
                    btoa( new Uint8Array(res).reduce( (data, byte) => data + String.fromCharCode(byte), "" ))
                }
                list.push(item)
                this.$refs.printRefName.getData(list)
            })
        }
    },
}
</script>
<style lang="less">
.internshipAssessment-handleModal {
    .ant-modal {
        background-color: #5ca3e5;
        position: static;
        width: 100%;
        height: 100%;
        top: 0 !important;
        padding-bottom: 0 !important;
        margin: 0 auto !important;
    }
    .ant-modal-content {
        height: 100%;
    }
    .ant-modal-body {
        padding: 15px !important;
        background-color: white;
        overflow-y: scroll;
        height: calc(100vh - 108px) !important;
    }
    .ant-modal-wrap {
        background-color: white;
    }
    .ant-list-empty-text {
        padding: 0px !important;
    }
    .ant-empty-normal {
        margin: 0px !important;
    }
}
.internshipAssessment-handleModal-div {
    width: 70%;
    margin: 0 auto;
    .internshipAssessment-handleModal-form-box {
        padding: 0 15px;
        margin-top: 20px;
        p {
            margin-block: 0px !important;
        }
        .ant-descriptions-bordered .ant-descriptions-item-label{
            font-weight: 600;
            color: rgba(0, 0, 0, 0.85);
            background-color:#e6f7ff;
            width: 150px !important;
            text-align: center;
            font-size: 16px;
            font-family:simHei !important;
        }
        .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
            padding: 5px 10px !important;
            .ant-form-item {
                margin-bottom: 0 !important;
            }

        }
        .descriptions-row .descriptions-label-slot{
            display: flex;
            align-items: center;
            width: 120px !important;//确保左侧固定文字不会换行
            justify-content: center;
            text-align: center;
        }
        .xhText{
            color: #f5222d;
            line-height: 31px;
            font-size: 14px;
            font-weight: 600;
            height: 30px;
        }
        .descriptions-item-center{

        }
        .ant-form-inline .ant-form-item-with-help{
            margin-bottom: 0px !important;
        }
        .zm-form-model{
            display: flex;
            .ant-form-item-control-wrapper{
                flex: 1;
            }
        }
        .ant-descriptions-bordered .ant-descriptions-row{
            border-bottom: 1px solid #e4e3e3;
        }
        .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
            border-right: 1px solid #e4e3e3;
            min-width: 100px;
        }
        .ant-descriptions-bordered .ant-descriptions-view{
            border: 1px solid #e4e3e3;
            border-right: 0;
        }
        .ant-descriptions-row:last-child{
            border-bottom: 0;
        }

    }
}
</style>
